<template>
  <div class="exam-details">
    <h4>基本信息</h4>
    <div class="detail-border">
      <el-table :data="[niceExam]" class="my_table">
        <el-table-column prop="examName" label="考试名称"></el-table-column>
        <el-table-column prop="type" label="类型">
          <template slot-scope="scope">
            <span>{{ scope.row.type | G(selectEnums.nice_exam) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="年级/科目">
          <template slot-scope="scope">
            <span>{{ scope.row.grade }}/{{ scope.row.subject }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="考试时长"></el-table-column>
        <el-table-column prop="examTime" label="起始时间"></el-table-column>
        <el-table-column prop="endTime" label="截止时间"></el-table-column>
      </el-table>
      <div class="line"></div>
      <el-table :data="list" class="my_table">
        <el-table-column prop="name" label="关联试卷"></el-table-column>
        <el-table-column prop="name" label="关联商品"></el-table-column>
        <el-table-column prop="description" label="考试说明"></el-table-column>
      </el-table>
    </div>
    <h4>
      考试数据
      <el-radio-group
        v-model="tabStatus"
        size="small"
        @change="selectStatus"
        class="margin-left10"
      >
        <el-radio-button label="0">全部</el-radio-button>
        <el-radio-button label="1">七年级数学A卷</el-radio-button>
        <el-radio-button label="2">七年级数学B卷</el-radio-button>
      </el-radio-group>
    </h4>
    <div class="detail-border">
      <el-table :data="list" class="my_table">
        <el-table-column prop="name" label="考试人数"></el-table-column>
        <el-table-column prop="type" label="完成人数"></el-table-column>
        <el-table-column label="完成率">
          <template slot-scope="scope">
            <span>{{ scope.row.grade }}/{{ scope.row.subject }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="平均分"></el-table-column>
        <el-table-column prop="state_date" label="平均用时"></el-table-column>
        <el-table-column prop="state_date" label="超越营录取"></el-table-column>
        <el-table-column prop="state_date" label="进阶营录取"></el-table-column>
        <el-table-column prop="state_date" label="精英营录取"></el-table-column>
      </el-table>
    </div>
    <el-form
      label-width="80px"
      :inline="true"
      class="margin-top20 margin-bottom20"
    >
      <el-form-item label="学生姓名">
        <el-input
          v-model="search.studentName"
          placeholder="请输入姓名/联系方式"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <nice-select
          v-model="search.status"
          placeholder="请选择考试状态"
          clearable
          :options="statusList"
        ></nice-select>
      </el-form-item>
      <el-form-item label="升班结果">
        <nice-select
          v-model="search.resultClassType"
          placeholder="请选择升班结果"
          clearable
          :options="endList"
        ></nice-select>
      </el-form-item>
      <el-form-item label="辅导老师">
        <el-input
          v-model="search.tutorName"
          placeholder="请输入辅导老师"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="small"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 入参：studentName 学生名字  status考试状态 0.未完成，1.已完成
resultClassType 升班结果  tutorName 辅导老师

出参：exam_type 考试类型   subject科目  spend_time 用时
         task_time 考试时间  task_exam_time 学生考试时间
        spend_time 用时  is_default 试卷类型   exam_task_status 状态
    result_class_type 升班结果  tutor_name 辅导老师-->
    <el-table :data="studentList">
      <el-table-column prop="studentName" label="学生姓名"></el-table-column>
      <el-table-column prop="type" label="考试">
        <template slot-scope="scope">
          <span>{{ scope.row.exam_type | G(selectEnums.nice_exam) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.grade }}/{{ scope.row.subject }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="考试分数" sortable></el-table-column>
      <el-table-column prop="task_exam_time" label="考试时间"></el-table-column>
      <el-table-column
        prop="spend_time"
        label="用时"
        sortable
      ></el-table-column>
      <!-- 下面两个要区分是升班考还是阶段考 -->
      <el-table-column prop="time" label="当前班型"></el-table-column>
      <el-table-column
        prop="result_class_type"
        label="升班结果"
      ></el-table-column>
      <el-table-column prop="tutor_name" label="辅导老师"></el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button size="small" type="text">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>
  </div>
</template>
<script>
import { getExamDetailsById, queryStudentTaskList } from "@/api/exam";
import { myEnumsMixins } from "@/utils/mixins";
export default {
  data() {
    return {
      id: this.$route.params.id, // 考试id
      tabStatus: "0",
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      statusList: [
        { label: "已完成", value: 0 },
        { label: "未完成", value: 1 }
      ],
      endList: [
        { label: "超越", value: 0 },
        { label: "未完成", value: 1 },
        { label: "未完成", value: 1 },
        { label: "未完成", value: 1 }
      ],
      search: {
        currPage: "1",
        pageSize: "10",
        studentName: "",
        status: "",
        resultClassType: "",
        tutorName: ""
      },
      list: [],
      niceExam: [], // 考试数据
      studentList: [] // 学生数据
    };
  },
  mixins: [myEnumsMixins],
  created() {
    this.getDataList();
    this.getStudentTaskList();
  },

  methods: {
    async getDataList() {
      let res = await getExamDetailsById({ id: this.id });
      if (res[0]) {
        return;
      }
      if (res[1] && res[1].code === 0) {
        this.niceExam = res[1].data.niceExam;
        console.log("res1", res[1]);
      }
    },
    async getStudentTaskList() {
      let params = this.search;
      let res = await queryStudentTaskList(params);
      if (res[0]) {
        return;
      }
      if (res[1] && res[1].code === 0) {
        this.studentList = res[1].data.list;
        console.log("res1", this.studentList);
      }
    },
    selectStatus() {},
    onSubmit() {},
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.getDataList();
    }
  }
};
</script>
<style lang="scss" scoped>
.exam-details {
  .detail-border {
    border: 1px solid #f6efef;
    padding: 10px;
  }
  .line {
    width: 100%;
    border: 1px dashed #f6efef;
    margin: 10px 0px;
  }
  ::v-deep .my_table {
    thead {
      .cell {
        text-align: left; // table 表头 左对齐
      }
    }
    .delete-row {
      color: #d8d8d8;
    }
    .el-table__expand-icon {
      //修改 el-tabel 折叠按钮的位置
      float: right;
    }
    border: 0;
    th,
    tr,
    td {
      border: 0;
      background-color: #fff;
    }
    &::before {
      height: 0px;
    }
    &::after {
      width: 0;
    }
    .el-table__fixed:before {
      height: 0;
    }
  }
}
</style>
